|
1
|
|
|
/** |
|
2
|
|
|
* This file is part of the O2System Venus UI Framework package. |
|
3
|
|
|
* |
|
4
|
|
|
* For the full copyright and license information, please view the LICENSE |
|
5
|
|
|
* file that was distributed with this source code. |
|
6
|
|
|
* |
|
7
|
|
|
* @author Steeve Andrian Salim |
|
8
|
|
|
* @copyright Copyright (c) Steeve Andrian Salim |
|
9
|
|
|
*/ |
|
10
|
|
|
// ------------------------------------------------------------------------ |
|
11
|
|
|
|
|
12
|
|
|
import * as $ from 'jquery'; |
|
13
|
|
|
import * as Dropzone from 'dropzone'; |
|
14
|
|
|
import 'dropify/dist/js/dropify'; |
|
15
|
|
|
|
|
16
|
|
|
/** |
|
17
|
|
|
* Class Upload |
|
18
|
|
|
* |
|
19
|
|
|
* @author Teguh Rianto |
|
20
|
|
|
* @package Components |
|
21
|
|
|
*/ |
|
22
|
|
|
export default class Upload { |
|
23
|
|
|
constructor() { |
|
24
|
|
|
/** |
|
25
|
|
|
* Init dropzone |
|
26
|
|
|
*/ |
|
27
|
|
|
this.initDropzone(); |
|
28
|
|
|
|
|
29
|
|
|
/** |
|
30
|
|
|
* Init dropify |
|
31
|
|
|
*/ |
|
32
|
|
|
this.initDropify(); |
|
33
|
|
|
} |
|
34
|
|
|
|
|
35
|
|
|
initDropzone() { |
|
36
|
|
|
if (typeof Dropzone != 'undefined') { |
|
37
|
|
|
Dropzone.autoDiscover = false; |
|
38
|
|
|
|
|
39
|
|
|
// Cards version |
|
40
|
|
|
const dropzoneCards = $('#dropzone-cards'); |
|
41
|
|
|
if(dropzoneCards.length) { |
|
42
|
|
|
|
|
43
|
|
|
let dropzoneCardsActionUrl = dropzoneCards.data('action-url'); |
|
44
|
|
|
|
|
45
|
|
|
let dropzoneCardsFilePreview = dropzoneCardsElement.find('#dropzone-cards-template'); |
|
46
|
|
|
dropzoneCardsFilePreview.removeAttr('id'); |
|
47
|
|
|
|
|
48
|
|
|
let dropzoneCardsFilePreviewTemplate = dropzoneCardsFilePreview.parent().html(); |
|
49
|
|
|
dropzoneCardsFilePreview.parent().remove(); |
|
50
|
|
|
|
|
51
|
|
|
<<<<<<< HEAD |
|
52
|
|
|
let dropzoneCards = new Dropzone('#dropzone-cards-form', { |
|
53
|
|
|
======= |
|
54
|
|
|
let dropzoneCardForms = $('#dropzone-cards-form').dropzone({ |
|
55
|
|
|
>>>>>>> 84f40ef6f93308c89dd599def41a82864d990f58 |
|
56
|
|
|
url: dropzoneCardsActionUrl, |
|
57
|
|
|
autoProcessQueue: true, |
|
58
|
|
|
thumbnailWidth: null, |
|
59
|
|
|
thumbnailHeight: null, |
|
60
|
|
|
previewTemplate: dropzoneCardsFilePreviewTemplate |
|
61
|
|
|
}); |
|
62
|
|
|
|
|
63
|
|
|
dropzoneCards.on("addedfile", function (file) { |
|
64
|
|
|
var fileId = 'media' + document.querySelectorAll('.media-list-item').length; |
|
65
|
|
|
file.previewElement.getElementsByTagName('input')[0].setAttribute('id', fileId); |
|
66
|
|
|
file.previewElement.getElementsByTagName('label')[0].setAttribute('for', fileId); |
|
67
|
|
|
|
|
68
|
|
|
var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif']; |
|
69
|
|
|
if (imagesFileTypes.indexOf(file.type) != -1) { |
|
70
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'none'; |
|
71
|
|
|
} else if (file.type === 'application/pdf') { |
|
72
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
|
73
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>'; |
|
74
|
|
|
} else if (file.type === 'application/doc' | 'application/docx') { |
|
75
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
|
76
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>'; |
|
77
|
|
|
} else if (file.type === 'application/ppt' | 'application/pptx') { |
|
78
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
|
79
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>'; |
|
80
|
|
|
} else if (file.type === 'video/mp4' | 'video/webm' | 'video/mkv') { |
|
81
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
|
82
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>'; |
|
83
|
|
|
} else if (file.type === 'audio/mpeg') { |
|
84
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
|
85
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>'; |
|
86
|
|
|
} else { |
|
87
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
|
88
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>'; |
|
89
|
|
|
} |
|
90
|
|
|
}); |
|
91
|
|
|
|
|
92
|
|
|
dropzoneCards.on("success", function (file, resp) { |
|
93
|
|
|
file.previewElement.querySelector(".media-list-item").classList.remove('uploading'); |
|
94
|
|
|
file.previewElement.querySelector(".upload-progress").style.display = 'none'; |
|
95
|
|
|
file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type; |
|
96
|
|
|
}); |
|
97
|
|
|
|
|
98
|
|
|
dropzoneCards.on("error", function (file) { |
|
99
|
|
|
file.previewElement.querySelector(".media-list-item").classList.remove('uploading'); |
|
100
|
|
|
file.previewElement.querySelector(".upload-progress").style.display = 'none'; |
|
101
|
|
|
file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type; |
|
102
|
|
|
}); |
|
103
|
|
|
} |
|
104
|
|
|
|
|
105
|
|
|
// Table version |
|
106
|
|
|
const dropzoneTable = $('#dropzone-table'); |
|
107
|
|
|
if(dropzoneTable.length) { |
|
108
|
|
|
|
|
109
|
|
|
let dropzoneTableActionUrl = dropzoneTable.data('action-url'); |
|
110
|
|
|
|
|
111
|
|
|
let dropzoneTableFilePreview = dropzoneTableElement.find('#dropzone-table-template'); |
|
112
|
|
|
dropzoneTableFilePreview.removeAttr('id'); |
|
113
|
|
|
|
|
114
|
|
|
let dropzoneTableFilePreviewTemplate = dropzoneTableFilePreview.parent().html(); |
|
115
|
|
|
dropzoneTableFilePreview.parent().remove(); |
|
116
|
|
|
|
|
117
|
|
|
let dropzoneTable = new Dropzone('#dropzone-table-form', { |
|
118
|
|
|
url: dropzoneTableActionUrl, |
|
119
|
|
|
autoProcessQueue: false, |
|
120
|
|
|
thumbnailWidth: null, |
|
121
|
|
|
thumbnailHeight: null, |
|
122
|
|
|
previewTemplate: dropzoneTableFilePreviewTemplate, // Define the container to display the previews |
|
123
|
|
|
previewsContainer: ".media-list-table", |
|
124
|
|
|
clickable: "#dropzone-add-file", // Define the element that should be used as click trigger to select files. |
|
125
|
|
|
}); |
|
126
|
|
|
|
|
127
|
|
|
dropzoneTable.on("addedfile", function (file) { |
|
128
|
|
|
console.log('test'); |
|
129
|
|
|
var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif']; |
|
130
|
|
|
if (imagesFileTypes.indexOf(file.type) != -1) { |
|
131
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'none'; |
|
132
|
|
|
} else if (file.type === 'application/pdf') { |
|
133
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
|
134
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>'; |
|
135
|
|
|
} else if (file.type === 'application/doc' | 'application/docx') { |
|
136
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
|
137
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>'; |
|
138
|
|
|
} else if (file.type === 'application/ppt' | 'application/pptx') { |
|
139
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
|
140
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>'; |
|
141
|
|
|
} else if (file.type === 'video/mp4' | 'video/webm' | 'video/mkv') { |
|
142
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
|
143
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>'; |
|
144
|
|
|
} else if (file.type === 'audio/mpeg') { |
|
145
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
|
146
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>'; |
|
147
|
|
|
} else { |
|
148
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
|
149
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>'; |
|
150
|
|
|
} |
|
151
|
|
|
// Hookup the start button |
|
152
|
|
|
file.previewElement.querySelector(".start").onclick = function() { dropzoneTable.enqueueFile(file); }; |
|
153
|
|
|
}); |
|
154
|
|
|
|
|
155
|
|
|
dropzoneTable.on("totaluploadprogress", function(progress) { |
|
156
|
|
|
document.querySelector("#dropzone-table-total-progress .progress-bar").style.width = progress + "%"; |
|
157
|
|
|
}); |
|
158
|
|
|
|
|
159
|
|
|
dropzoneTable.on("sending", function(file) { |
|
160
|
|
|
// Show the total progress bar when upload starts |
|
161
|
|
|
document.querySelector("#dropzone-table-total-progress").style.opacity = "1"; |
|
162
|
|
|
// And disable the start button |
|
163
|
|
|
file.previewElement.querySelector(".start").setAttribute("disabled", "disabled"); |
|
164
|
|
|
}); |
|
165
|
|
|
|
|
166
|
|
|
dropzoneTable.on("success", function (file, resp) { |
|
167
|
|
|
file.previewElement.querySelector(".upload-progress").style.display = 'none'; |
|
168
|
|
|
file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type; |
|
169
|
|
|
}); |
|
170
|
|
|
|
|
171
|
|
|
dropzoneTable.on("error", function (file) { |
|
172
|
|
|
file.previewElement.querySelector(".upload-progress").style.display = 'none'; |
|
173
|
|
|
file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type; |
|
174
|
|
|
}); |
|
175
|
|
|
|
|
176
|
|
|
dropzoneTable.on("queuecomplete", function(progress) { |
|
177
|
|
|
document.querySelector("#dropzone-table-total-progress").style.opacity = "0"; |
|
178
|
|
|
}); |
|
179
|
|
|
|
|
180
|
|
|
// Setup the buttons for all transfers |
|
181
|
|
|
// The "add files" button doesn't need to be setup because the config |
|
182
|
|
|
// `clickable` has already been specified. |
|
183
|
|
|
document.querySelector("#dropzone-table-actions .start").onclick = function() { |
|
184
|
|
|
dropzoneTable.enqueueFiles(dropzoneTable.getFilesWithStatus(Dropzone.ADDED)); |
|
185
|
|
|
}; |
|
186
|
|
|
|
|
187
|
|
|
document.querySelector("#dropzone-table-actions .cancel").onclick = function() { |
|
188
|
|
|
dropzoneTable.removeAllFiles(true); |
|
189
|
|
|
}; |
|
190
|
|
|
} |
|
191
|
|
|
} |
|
192
|
|
|
} |
|
193
|
|
|
|
|
194
|
|
|
initDropify(){ |
|
195
|
|
|
$('.dropify').dropify(); |
|
196
|
|
|
} |
|
197
|
|
|
} |
o2system /
venus-form
